<template>
    <div v-if="showChildRoutes" class="route-cards-container">
        <div v-for="group in groupedRoutes" :key="group.menu" class="menu-group">
            <div class="menu-title">{{ group.menu }}</div>
            <div class="grid-container">
                <div v-for="route in group.routes" :key="route.path" class="grid-item" @click="navigateToRoute(route)">
                    <div class="route-card">
                        <div class="icon">
                            <SvgIcon style="color:rgba(77, 77, 77, 1)" size="72" v-if="route.meta.icon"
                                :icon="route.meta.icon"></SvgIcon>
                        </div>
                        {{ route.meta.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <router-view v-show="!showChildRoutes" v-slot="{ Component }">
        <component :is="Component" />
    </router-view>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const currentRoute = useRoute()
const childRoutes = ref([])
const groupedRoutes = ref([])

const showChildRoutes = computed(() => {
    const hasChildRoutes = childRoutes.value.length > 0
    const routeParts = currentRoute.path.split('/').filter(Boolean)
    const isSecondLevel = routeParts.length === 2
    return hasChildRoutes && isSecondLevel
})

// 优化子路由获取逻辑
const getChildRoutes = () => {
    const routes = router.getRoutes()
    const routeParts = currentRoute.path.split('/').filter(Boolean)
    const parentPath = routeParts.slice(0, 2).join('/')

    childRoutes.value = routes.filter(route => {
        // 跳过隐藏路由
        if (route.meta?.hidden) return false

        const routePathParts = route.path.split('/').filter(Boolean)

        return route.path.startsWith(`/${parentPath}/`) &&
            routePathParts.length === 3 &&
            route.path !== `/${parentPath}`
    })

    // 按menu分组
    groupRoutesByMenu()
}

// 按menu字段分组路由
const groupRoutesByMenu = () => {
    const groups = {}

    childRoutes.value.forEach(route => {
        const menu = route.meta?.menu || ''
        if (!groups[menu]) {
            groups[menu] = []
        }
        groups[menu].push(route)
    })

    // 转换为数组格式，方便模板渲染
    groupedRoutes.value = Object.keys(groups).map(menu => ({
        menu,
        routes: groups[menu]
    }))
}

// 修改 navigateToRoute 函数，直接传递路由对象
const navigateToRoute = (route) => {
    const query = route?.meta?.linkExtra || {}

    router.push({
        path: route.path,
        query
    })
}

// 监听路由变化
watch(
    () => currentRoute.path,
    () => {
        getChildRoutes()
    },
    { immediate: true }
)

onMounted(() => {
    getChildRoutes()
})
</script>

<style scoped>
.route-cards-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu-group {
    width: 100%;
    padding: 31px 65px;
    border-radius: 32px;
}

.menu-title {
    font-size: 32px;
    margin-bottom: 32px;
    font-weight: medium;
    color: rgba(77, 77, 77, 1);
}

.grid-container {
    width: 100%;
    display: grid;
    justify-items: center;
}

.grid-item {
    width: 408px;
}

.route-card {
    padding: 36px;
    width: 408px;
    cursor: pointer;
    background: #fff;
    border-radius: 32px;
    transition: transform 0.3s ease;
    font-size: 40px;
    color: rgba(77, 77, 77, 1);
    display: flex;
    align-items: center;
    gap: 24px;
    /* 不要换行 */
    white-space: nowrap;
    /* 内边框 */
    box-shadow: inset 0 0 0 0.7px rgba(207, 207, 207, 1);
    transition: all 0.3s ease;
    margin-bottom: 32px;
}

.icon {
    display: flex;
    align-items: center;
}

.route-card:hover {
    box-shadow: inset 0 0 0 5px rgba(207, 207, 207, 1);
}
</style>